<template>
  <Form ref="form" :model="data[0]" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
    <Row :gutter="24" type="flex" justify="start" style="padding:2px 5px;">
      <Col v-for="(item,index) in columns" :key="index" :span="24/cols">
        <FormItem :label="item.title" :prop="item.key" >
          <span slot="label" :style="labelStyle">{{item.title}}</span>
          <cli-cell v-if="!onlyRead" :config="item.config" :value="tools.lodash.get(data[0],item.key)" 
            @change="change($event,[item.key])"></cli-cell>
          <span v-else>{{tools.lodash.get(data[0],item.key)}}</span>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>

<script>
import cliCell from "./cli-cell";
export default {
  name: "cli-form",
  components:{cliCell},
  data(){
    return {
    }
  },
  watch: {
    data(val) {
      console.log("file: cli-form.vue:26  data  val:", this.data[0])
    }
  },
  props: {
    labelWidth: {
      default: () => {
        return 100;
      }
    },
    labelPosition: {
      default: () => {
        return 'right';
      }
    },
    cols: {
      default: () => {
        return 1;
      }
    },
    columns: {
      default: () => {
        return [
        ];
      }
    },
    data:{
      default:()=>{
        return [];
      }
    },
    labelStyle:{
      default:()=>{
        return {};
      }
    },
    onlyRead: {
      default: () => {
        return false
      }
    },
  },
  computed:{
    rules(){
      let rules={};
      this.columns.map(item=>{
        rules[item.key]=item.validate;
      })
      return rules;
    }
  },
  methods:{
    change(value,path){
      this.tools.lodash.set(this.data[0],path,value)
      console.log(this.data)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
